<template>
  <el-card shadow="never" id="dataCard" style="width: 80%; margin-right: 10%; margin-left: 10%;line-height: 1.7">
    <div style="margin-top: 20px;margin-bottom: 20px">
      <span>进度：{{count}}/2000</span>
      <el-progress style="width: 100%" :percentage="count * 100/2000" />
    </div>

    <CalendarHeatmap/>
    <JobPie/>
    <VersionPie/>
    <TypePie/>
    <DutyBar/>

  </el-card>

  <el-affix position="bottom" :offset="80">
    <el-button style="float: right" @click="downloadImg" type="primary" v-loading="loading">导出为图片</el-button>
  </el-affix>
</template>

<script setup lang="ts">
import CalendarHeatmap from '@/views/components/charts/CalendarHeatmap/index.vue'
import JobPie from '@/views/components/charts/JobPie/index.vue'
import DutyBar from '@/views/components/charts/DutyBar/index.vue'
import VersionPie from '@/views/components/charts/VersionPie/index.vue'
import TypePie from '@/views/components/charts/TypePie/index.vue'
import html2canvas from "html2canvas";
import { doAnalysis, count, hourMap } from '@/data/service/logAnalysisService'
import {onBeforeMount, ref} from "vue";
import FileSaver from "file-saver";

onBeforeMount(() => {
  doAnalysis()
})

const loading = ref(false)

const downloadImg = ()=>{
  loading.value = true
  html2canvas(document.querySelector("#dataCard") as HTMLElement).then(canvas => {
    canvas.toBlob((blob)=>{
      FileSaver.saveAs(blob as Blob, 'kaidao.png')
    }, "image/png")
    loading.value = false
  });
}

</script>

<style scoped>

</style>